import React, { Component } from 'react'
import { Modal, Form, Input, Select, Cascader } from 'antd'
import { categoryOptions, levelOptions, accessOptions, cascaderOptions } from './data'

const { TextArea } = Input;

export default class AddCategory extends Component {
    myForm = React.createRef()

    state = {
        confirmLoading: false
    }

    /**
     * 确定
     */
    onOk = () => {
        this.setState({ confirmLoading: true })
        this.myForm.current.validateFields().then(values => {
            this.props.onOk()
        }).finally(() => {
            this.setState({ confirmLoading: false })
        })
    }

    render() {
        const { isVisible, onCancel } = this.props
        const { confirmLoading } = this.state
        return (
            <div>
                <Modal title="新增品类" visible={isVisible} confirmLoading={confirmLoading} onOk={this.onOk} onCancel={() => onCancel()}>
                    <Form
                    ref={this.myForm}
                    name="basic"
                    wrapperCol={{
                        span: 24
                    }}
                    initialValues={{
                        remember: true
                    }}
                    autoComplete="off"
                    >
                        <Form.Item
                            name="category"
                            label="品类名称"
                            rules={[
                            {
                                required: true,
                                message: '请选择品类名称！'
                            }
                            ]}
                        >
                            <Select options={categoryOptions} allowClear placeholder="品类名称" />
                        </Form.Item>
                        <Form.Item
                            name="level"
                            label="品类等级"
                            rules={[
                            {
                                required: true,
                                message: '请选择品类等级！'
                            }
                            ]}
                        >
                            <Select options={levelOptions} allowClear placeholder="品类等级" />
                        </Form.Item>
                        <Form.Item
                            name="access"
                            label="是否接入"
                            rules={[
                            {
                                required: true,
                                message: '请选择是否接入！'
                            }
                            ]}
                        >
                            <Select options={accessOptions} allowClear placeholder="是否接入" />
                        </Form.Item>
                        <Form.Item
                            name="area"
                            label="所属地区"
                            rules={[
                            {
                                required: true,
                                message: '请选择所属地区！'
                            }
                            ]}
                        >
                            <Cascader options={cascaderOptions} allowClear placeholder="所属地区" />
                        </Form.Item>
                        <Form.Item
                            name="addr"
                            label="详细地址"
                            maxLength={200}
                            rules={[
                            {
                                required: true,
                                message: '请选择详细地址！'
                            }
                            ]}
                        >
                            <TextArea allowClear placeholder="详细地址" />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
